/* eslint-disable no-unused-vars */
import React, { ReactNode, useState, useEffect } from 'react'
import { Card, Tree, Image } from 'antd'
import { GlobalOutlined, DisconnectOutlined, ApiOutlined } from '@ant-design/icons'
import { INSERT_PIC } from '../Home/SearchTable/contants'
import { getFriends } from '../../utils/service'
import {
  OnlineDom,
  MyStatusDom,
  MyInfoDom,
  MyFriendsListDom,
  TreeDom,
  CodeStyle,
  Props,
  User,
  TreeNode
} from './contants'

// 现在有问题，比如换了好友分组，刷新页面API也不会更新列表，而且也获取不到空分组(这个倒是无所谓)
// 想加的功能
// 在树组件的Title后面加: 在线人数 / 所有人数，在朋友前面加上朋友的头像
// 定时刷新API(现在刷新好友API，若你把一个好友挪动到另外一个分组，API请求到的分组不改变，但是你删除/添加好友刷新API会改变，好友上下线API也会改变)
//   -- 1. 定时刷新API肯定做得到，要的是刷新API后树状结构数据改变，这样就能做到伪实时监听
// 比较遗憾的是不知道有没有好友聊天ws接口
// 已经卸载LOL了，不写了，如果我还和LOL有缘，会继续更新的，致敬[弗雷尔卓德]-传奇召唤师（我）：星光菌子 #12668，最高段位：荣耀黄金 II(🤡)

const OnlineFriends: React.FC<Props> = ({ initData, friends }): React.ReactNode => {
  const [myPic, setMyPic] = useState('')
  const [friendList, setFriendList] = useState<any>([])

  useEffect(() => {
    setMyPic(INSERT_PIC(initData?.profileIconId))
    // 请求好友列表
    getFriends()
      .then((res: any) => {
        if (res && res.data) {
          setFriendList(res.data)
          localStorage.setItem('friendsList', JSON.stringify(groupUsersByGroupName(res.data)))
        }
      })
      .catch((error: any) => {
        console.error('[好友]: API未成功执行(可能未启动LOL客户端):', error.code, error.message)
      })
  }, [])

  const groupUsersByGroupName = (users: User[]): TreeNode[] => {
    const groupedUsers: { [groupName: string]: TreeNode } = {}
    if (users) {
      users.forEach(user => {
        const { groupName } = user
        if (!groupedUsers[groupName]) {
          groupedUsers[groupName] = {
            title: groupName === '**Default' ? '综合' : groupName,
            key: `${groupName}-0`,
            children: []
          }
        }
        const childKey = `${groupName}-${groupedUsers[groupName]?.children!.length}-${user.name}`
        groupedUsers[groupName]?.children!.push({
          title: user.name,
          key: childKey,
          // 这里若显示icon，react会报错，那个错误我没看懂
          // icon: user.availability === 'offline' ? <ApiOutlined /> : <ApiOutlined />,
          icon: user.availability === 'offline' ? 'x' : '√',
          summonerId: user.summonerId,
          puuid: user.puuid,
          availability: user.availability
        })
      })
    }
    return Object.values(groupedUsers)
  }

  return (
    <>
      <Card style={{ backgroundColor: 'rgb(1,10,19)' }}>
        <div style={OnlineDom}>
          <div style={MyStatusDom}>
            {initData || initData?.profileIconId ? (
              <Image preview={false} style={{ borderRadius: '50%' }} width={60} height={60} src={myPic} />
            ) : (
              <div
                style={{
                  position: 'relative',
                  borderRadius: '50%',
                  width: '60px',
                  height: '60px',
                  backgroundImage: `url('https://img2.baidu.com/it/u=3930603343,1676463907&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1720112400&t=e2e4f2756c8eacada5d63f68a6d4d2a5')`,
                  backgroundSize: 'cover',
                  backgroundPosition: 'center'
                }}
              ></div>
            )}
            <div style={MyInfoDom}>
              <span>{initData?.displayName}</span>
              {initData?.tagLine && <span style={CodeStyle}>#{initData?.tagLine}</span>}
              {!initData?.tagLine && (
                <>
                  <span>无用户</span>
                  <span style={CodeStyle}>检查客户端是否启动</span>
                </>
              )}
            </div>
          </div>
          <div style={MyFriendsListDom}>{<Tree style={TreeDom} showIcon treeData={friends} />}</div>
        </div>
      </Card>
    </>
  )
}

export default OnlineFriends
